<template>
    <div class="header-container flex-box">
        <div class="header-left flex-box">
            <el-icon class="icon" size="20" @click="store.commit('collapseMenu')">
                <Fold />
            </el-icon>
            <ul class="flex-box">
                <li 
                    v-for="(item, index) in selectMenu" 
                    :key="item.path"
                    :class="{selected : item.path === route.path}"
                    class="tab flex-box"
                >
                    <el-icon size="11"><component :is="item.icon"></component></el-icon>
                    <router-link :to="item.path" class="text flex-box">
                        {{ item.name }}
                    </router-link>
                    <el-icon size="10" class="close" @click="closeTab(item, index)"><Close/></el-icon>
                </li>
            </ul>
        </div>
        <div class="header-right">
            <el-dropdown>
                <div class="el-dropdown-link flex-box">
                    <el-avatar
                        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                    />
                    <p class="user-name">用户名</p>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>Action 1</el-dropdown-item>
                        <el-dropdown-item>Action 2</el-dropdown-item>
                        <el-dropdown-item>Action 3</el-dropdown-item>
                        <el-dropdown-item disabled>Action 4</el-dropdown-item>
                        <el-dropdown-item divided>Action 5</el-dropdown-item>
                        <el-dropdown-item divided>Action 6</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup>
import { useStore } from 'vuex';
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const store = useStore()
const route = useRoute()
const router = useRouter()

const selectMenu = computed(() => store.state.menu.selectMenu)

const closeTab = (item, index) => {
    // 删除tab
    store.commit('closeTab', item)
    // 删除非当前选中的tab
    if(route.path !== item.path){
        return
    }
    const selectMenuData = selectMenu.value
    // 删除当前选中的tab
    // 删除最后一个tab
    if(index === selectMenuData.length){
        // 删除剩下的唯一一个tab
        if(!selectMenuData.length){
            router.push('/')
        }else{
            router.push(selectMenuData[index - 1].path)
        }
    }else{
        router.push(selectMenuData[index].path)
    }
}

</script>

<style lang="less" scoped> 
.flex-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.header-container {
    background-color: #fff;
    padding-right: 25px;
    .header-left {
        height: 100%;
        .icon {
            width: 45px;
            height: 100%;
        }
        .icon:hover {
            background-color: #f5f5f5;
            cursor: pointer;
        }
        .tab {
            padding: 0 10px;
            height: 100%;
            .text{
                margin: 0 5px;
                color: #000;
            }
            .close {
                visibility: hidden;
            }
            &.selected {
                background-color: #f5f5f5;
                a{
                    color: #409eff;
                }
                i{
                    color: #409eff;
                }
            }
        }
        .tab:hover{
            background: #f5f5f5;
            .close {
                visibility: inherit;
                color: #000;
                cursor: pointer;
            }
        }
    }
    .header-right {
        .user-name {
            margin-left: 10px;
        }
    }
}
</style>